<template>
  <div class="w-full h-full min-h-screen box-border relative">  
    <van-nav-bar 
      left-arrow 
      :title="$t('pageTitle.balanceRecords')" 
      @click-left="router.back()" 
      safe-area-inset-top 
    />
    <van-cell-group>
      <van-cell>
        <template #title>
          <van-row justify="center" align="center" class="text-center">
            <van-col :span="6">
              {{ $t('tableHeader.category') }}
            </van-col>
            <van-col :span="6">{{ $t('tableHeader.money') }}</van-col>
            <van-col :span="6">{{ $t('tableHeader.time') }}</van-col>
            <van-col :span="6">{{ $t('tableHeader.state') }}</van-col>
          </van-row>
        </template>
      </van-cell>
    </van-cell-group>
    <van-pull-refresh v-model="refresh" @refresh="handleRefresh">
      <van-empty
        v-if="!list.length && !loading"
        image-size="100"
        :description="$t('noData')"
      />
      <van-list 
        v-else
        v-model:loading="loading" 
        :finished="finished" 
        @load="handleLoad"
      >
        <van-cell-group v-for="item in list" :border="false">
          <van-cell :border="false">
            <template #title>
              <van-row justify="center" align="center" class="text-center">
                <van-col :span="6">
                  {{ $t(recordType.get(item.type)!) }}
                </van-col>
                <van-col :span="6">
                  {{ item?.type === 'RECHARGE' ? '+' : '-' }} {{ item?.money }}
                </van-col>
                <van-col :span="6">
                  {{ moment(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                </van-col>
                <van-col :span="6">
                  {{ $t(recordState.get(item.state)!) }}
                </van-col>
              </van-row>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </van-pull-refresh>
    <van-number-keyboard safe-area-inset-bottom />
  </div>
</template>
<script setup lang="ts">
import { showFailToast } from "vant"

import { useRouter } from "vue-router"

import { rechargeRecords } from "@/service/login"

import moment from "moment"

import { recordState, recordType } from "@/utils/enums"

const router = useRouter()

const page = ref({
  current: 1,
  size: 10
})

const refresh = ref<boolean>(false)

const finished = ref<boolean>(false)

const loading = ref<boolean>(false)

const list = ref<any[]>([])

const getList = async () => {
  try {
    if(finished.value) return 

    const params = { ...page.value }
    
    const ret = await rechargeRecords(params)

    if(!ret.success) return showFailToast(ret.message)

    loading.value = false
  
    switch(true){
      case refresh.value: 
        list.value = ret.data?.records || []
        break
      default: 
        list.value = [...new Set([...list.value, ...(ret.data ? ret.data?.records : [])])]
        break
    }

    await nextTick()

    if(
      ret.data?.total === 0 || 
      !list.value.length ||
      (list.value.length >= ret.data?.total)
    ) return finished.value = true

    page.value.current++
  } catch(err: any){
    finished.value = true
    refresh.value = false
    loading.value = false
    throw err
  }
}

const handleRefresh = async () => {
  page.value.current = 1
  page.value
  refresh.value = true
  loading.value = true
  finished.value = false
  list.value = []
  await handleLoad()
  refresh.value = false
}

const handleLoad = async () => await getList()

onBeforeMount(() => handleLoad())
</script>

<style lang="less" scoped></style>
